import { useCache } from '@/hooks/web/useCache'
import { useAppStore } from '@/store/modules/app'
import { setCssVar } from '@/utils'
import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
import { useCssVar } from '@vueuse/core'
import { unref } from 'vue'

const { wsCache } = useCache()
const appStore = useAppStore()

const setMenuTheme = (color: string) => {
  const primaryColor = useCssVar('--el-color-primary', document.documentElement)
  const isDarkColor = colorIsDark(color)
  const theme: Recordable = {
    // 左侧菜单边框颜色
    leftMenuBorderColor: isDarkColor ? 'inherit' : '#eee',
    // 左侧菜单背景颜色
    leftMenuBgColor: color,
    // 左侧菜单浅色背景颜色
    leftMenuBgLightColor: isDarkColor ? lighten(color!, 6) : color,
    // 左侧菜单选中背景颜色
    leftMenuBgActiveColor: isDarkColor
      ? 'var(--el-color-primary)'
      : hexToRGB(unref(primaryColor), 0.1),
    // 左侧菜单收起选中背景颜色
    leftMenuCollapseBgActiveColor: isDarkColor
      ? 'var(--el-color-primary)'
      : hexToRGB(unref(primaryColor), 0.1),
    // 左侧菜单字体颜色
    leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333',
    // 左侧菜单选中字体颜色
    leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
    // logo字体颜色
    logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
    // logo边框颜色
    logoBorderColor: isDarkColor ? color : '#eee'
  }
  appStore.setTheme(theme)
  appStore.setCssVarTheme()
}

// 初始化根据缓存设置界面配置
export const setupUI = (ui?: any): void => {
  let wsConfig = wsCache.get('uiConfig') || {}
  console.log(ui, wsCache.get('uiConfig'))
  if (ui && ui.version !== wsConfig.version) {
    wsCache.set('uiConfig', ui)
    wsCache.set('theme', ui.theme)
    wsConfig = ui
  }

  // 版本号
  if (wsConfig.hasOwnProperty('version')) {
    appStore.setVersion(wsConfig.version)
  }

  // 布局
  if (wsConfig.hasOwnProperty('layout')) {
    appStore.setLayout(wsConfig.layout)
  }

  // 面包屑
  if (wsConfig.hasOwnProperty('breadcrumb')) {
    appStore.setBreadcrumb(wsConfig.breadcrumb)
  }

  // 面包屑图标
  if (wsConfig.hasOwnProperty('breadcrumbIcon')) {
    appStore.setBreadcrumbIcon(wsConfig.breadcrumbIcon)
  }

  // 折叠图标
  if (wsConfig.hasOwnProperty('hamburger')) {
    appStore.setHamburger(wsConfig.hamburger)
  }

  // 全屏图标
  if (wsConfig.hasOwnProperty('screenfull')) {
    appStore.setScreenfull(wsConfig.screenfull)
  }

  // 尺寸图标
  if (wsConfig.hasOwnProperty('size')) {
    appStore.setSize(wsConfig.size)
  }

  // 多语言图标
  if (wsConfig.hasOwnProperty('locale')) {
    appStore.setLocale(wsConfig.locale)
  }

  // 标签页
  if (wsConfig.hasOwnProperty('tagsView')) {
    // 切换标签栏显示时，同步切换标签栏的高度
    setCssVar('--tags-view-height', wsConfig.tagsView ? '35px' : '0px')
    appStore.setTagsView(wsConfig.tagsView)
  }

  //标签页图标
  if (wsConfig.hasOwnProperty('tagsViewIcon')) {
    appStore.setTagsViewIcon(wsConfig.tagsViewIcon)
  }

  // logo
  if (wsConfig.hasOwnProperty('logo')) {
    appStore.setLogo(wsConfig.logo)
  }

  //菜单手风琴
  if (wsConfig.hasOwnProperty('uniqueOpened')) {
    appStore.setUniqueOpened(wsConfig.uniqueOpened)
  }

  //固定头部
  if (wsConfig.hasOwnProperty('fixedHeader')) {
    appStore.setFixedHeader(wsConfig.fixedHeader)
  }

  //页脚
  if (wsConfig.hasOwnProperty('footer')) {
    appStore.setFooter(wsConfig.footer)
  }

  //灰色模式
  if (wsConfig.hasOwnProperty('greyMode')) {
    appStore.setGreyMode(wsConfig.greyMode)
  }

  //固定菜单
  if (wsConfig.hasOwnProperty('fixedMenu')) {
    appStore.setFixedMenu(wsConfig.fixedMenu)
  }

  //主页面边距
  if (wsConfig.hasOwnProperty('mainPadding')) {
    setCssVar('--app-content-padding', wsConfig.mainPadding ? '15px' : '0px')
    appStore.setMainPadding(wsConfig.mainPadding)
  }

  //左侧菜单宽度
  if (wsConfig.hasOwnProperty('leftMenuWidth')) {
    setCssVar('--left-menu-max-width', wsConfig.leftMenuWidth || '200px')
    appStore.setLeftMenuWidth(wsConfig.leftMenuWidth)
  }

  if (wsCache.get('theme')) {
    const theme = wsCache.get('theme')
    console.log('=====>', theme)
    setMenuTheme(theme.leftMenuBgColor)
  }
}
